<template>
  <div class="add">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动标题" prop="activityTitle">
        <el-input
          v-model="ruleForm.activityTitle"
          placeholder="请选择活动区域"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动简介" prop="activityIntroduce">
        <el-input
          v-model="ruleForm.activityIntroduce"
          placeholder="请选择活动简介"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动内容" prop="activityContent">
        <!-- <el-input v-model="ruleForm.name" placeholder="请选择活动内容" ></el-input> -->
        <div class="edit_container">
          <quill-editor
            v-model="ruleForm.activityContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="活动标记" prop="activitySign">
        <el-input
          v-model="ruleForm.activitySign"
          placeholder="请选择活动标记"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动封面">
        <el-upload
          class="upload-demo"
          :action="baseUrl + '/common/upload'"
          :headers="headers"
          :show-file-list="false"
          :on-success="aaa"
        >
          <div class="el-upload__text">
            <i v-if="!ruleForm.coverUrl" class="el-icon-upload"></i>
            <img v-else :src="baseUrl + ruleForm.coverUrl" alt="" />
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="是否发布" prop="isRelease">
        <el-radio-group v-model="ruleForm.isRelease">
        <el-radio  v-model="ruleForm.isRelease" label="1">是</el-radio>
          <el-radio  v-model="ruleForm.isRelease" label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否外链" prop="isLink">
        <el-radio-group v-model="ruleForm.isLink">
        <el-radio  v-model="ruleForm.isLink" label="1">是</el-radio>
          <el-radio  v-model="ruleForm.isLink" label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="链接" prop="link">
        <el-input
          type="textarea"
          v-model="ruleForm.link"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="ramark">
        <el-input
          type="textarea"
          v-model="ruleForm.ramark"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
<script>
// <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"></link>
//  var E = window.wangEditor;
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "../../../utils/auth";
import { addActivity, uptActivity } from "../../../api/api/api";
export default {
  name: "add",
  components: {
    quillEditor,
  },
  created(){

      if(this.$route.query.id){
        this.updateUser()
      }else if(this.$route.query.ww){
        this.updateUse()
      }
  },
  mounted(){

  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      isshow:false,
      ruleForm: {
        activityId: "",
        activityTitle: "",
        activityIntroduce: "",
        activityContent: "",
        activitySign: "",
        coverUrl: "",
        isRelease:false,
        isLink:false,
        link: "",
        ramark: "",
        tip: "2016-05-02",
        rotation: "王小虎",
        introduction: "上海市普陀区金沙江路 1518 弄",
        content: "册封",
        tag: "1",
        cover: "德文法文",
        link: "",
        chain:true,
        Publish:true,
        remarks:''
      },
      rules: {
        activityTitle: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        activityContent: [
          { required: true, message: "请输入活动简介", trigger: "blur" },
        ],
        isRelease: [{ required: true, message: "是否发布", trigger: "change" }],
        isLink: [{ required: true, message: "是否外链", trigger: "change" }],
      },
      //编辑器
      content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      editorOption: {
        placeholder: "请输入内容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            ["image", "video"], //上传图片、上传视频
          ],
        },
      },
    };
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    //新增
    adduesr() {
      addActivity(this.ruleForm).then((res) => {
        console.log('wwwww',res);
      });
    },
    //修改
    updateUser() {
      this.ruleForm = this.$route.query.id;
      uptActivity(this.ruleForm).then((res) => {
        console.log(res);
            
      });
    },
     updateUse() {
      this.ruleForm = this.$route.query.ww;
      console.log("fff",this.ruleForm);
      uptActivity(this.ruleForm).then((res) => {
        console.log(res);
            
      });
    },
    //确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (this.$route.query.id) {
          this.updateUser();
        }else if(this.$route.query.ww){
          console.log("vvvv",this.$route.query.ww);
          this.updateUse();
        }
         else {
          this.adduesr();
          console.log('wwwww');
        }
        this.$router.push(
          "/homepageManagement/homepageManagement/Activity/Activity"
        );
      });
    },
    //取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push(
        "/homepageManagement/homepageManagement/Activity/Activity"
      );
    },
    //图片调用
    aaa(response, file, fileList) {
      this.ruleForm.coverUrl = response.fileName;
      console.log(response, file, fileList);
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
    gett(){
      return this.$router.query.eidtForm
    }
  },
};
</script>

<style scope>
.add {
  margin-top: 30px;
}
.el-input__inner {
  height: 30px;
}
.el-form-item {
  margin-bottom: 15px;
}
.ql-editor {
  height: 100px;
}
.ql-toolbar.ql-snow {
  padding: 0;
}

.el-textarea__inner {
  line-height: 1;
}
.el-button--primary {
  margin-left: 480px;
}
.el-upload__text img {
  height: 100px;
  width: 100px;
  border: solid 1px black;
}
::v-deep .el-image__inner {
  width: 15px !important;
}
</style>